<!DOCTYPE HTML>
<html th:with="title='珠宝管理'">
<head th:include="fragments/header :: header">
<meta charset="utf-8" />
</head>
<body id="app">
	<div class="page-container">
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="l">
				<a class="btn btn-primary size-L radius" href="javascript:;" onclick="add()">
					<i class="Hui-iconfont">&#xe600;</i>
					新增
				</a>
				<a class="btn btn-danger size-L radius" href="javascript:;" onclick="batchDel()">
					<i class="Hui-iconfont">&#xe6e2;</i>
					批量删除
				</a>
			</span>
			<span class="r">
				<a class="btn btn-success size-L radius" href="javascript:location.replace(location.href);" title="刷新">
					<i class="Hui-iconfont">&#xe68f;</i>
					刷新
				</a>
			</span>
		</div>
		<div class="text-l pd-5">
			广告名称：
			<input type="text" class="input-text size-S" style="width: 150px" placeholder="请输入优惠券名称" id="adName" name="adName">
			商家名称：
			<input type="text" class="input-text size-S" style="width: 150px" placeholder="请输入商家名称" id="adBussinesName" name="adBussinesName">
			<button type="button" class="btn btn-success size-S radius" onclick="query()">
				<i class="Hui-iconfont">&#xe665;</i>
				查询
			</button>
		</div>
		<div>
			<table class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="25">
							<input type="checkbox" name="" value="" />
						</th>
						<th width="100">广告名称</th>
						<th width="100">商家名称</th>
						<th width="100">视频</th>
						<th width="100">图片</th>
						<th width="100">链接</th>
						<th width="100">位置</th>
						<th width="100">分类</th>
						<th width="100">商品</th>
						<th width="100">类型</th>
						<!-- <th width="100">投放设备</th> -->
						<th width="100">创建时间</th>
						<th width="100">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c" v-for="item in pageData.rows">
						<td>
							<input type="checkbox" value="{{ item.id }}" name="ids">
						</td>
						<td>{{ item.adName }}</td>
						<td>{{ item.adBusinessName }}</td>
						<td>
							<a href="{{ item.adVideo }}" target="_blank">{{ item.adVideo }}</a>
						</td>
						<td>
							<img class="open-viewer" onclick="lockMaxImg()" v-bind:src="item.adImage" width="100" height="100">
						</td>
						<td>
							<a href="{{ item.adUrl }}" target="_blank">{{ item.adUrl }}</a>
						</td>
						<td>{{ item.teltemplatelayout.name }}</td>
						<td>{{ item.adsclassify.name }}</td>
						<td>{{ item.product.name }}</td>
						<td>{{ item.adsType|adsTypeFilter }}</td>
						<td>{{ item.createdDate }}</td>
						<td class="td-manage">
							<!-- <a title="查看" href="javascript:;" onclick="view('{{item.id}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe695;</i></a> -->
<!-- 							<a title="编辑" href="javascript:;" onclick="edit('{{item.id}}')" class="ml-5" style="text-decoration: none" class="btn btn-primary size-L radius">
								<i class="Hui-iconfont">&#xe6df;</i>
								编辑
							</a> -->
							<a title="删除" href="javascript:;" onclick="del('{{item.id}}')" class="ml-5" style="text-decoration: none" class="btn btn-danger size-L radius">
								<i class="Hui-iconfont">&#xe6e2;</i>
								删除
							</a>
						</td>
					</tr>
				</tbody>
			</table>

			<div v-show="pageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
				<div class="l">
					<span>
						每页
						<select name="pageSizeSelect" id="pageSizeSelect" style="vertical-align: baseline !important; height: 27.6px;" onchange="query()">
							<option value="10" selected="selected">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
						条 显示 {{pageData.rowIndexStart}} 到 {{pageData.rowIndexEnd}} ，共 {{pageData.total}} 条
					</span>
				</div>
				<div id="pageNav" class="r"></div>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		// ==================================================
		var app = new Vue({
			el : '#app',
			data : {
				pageData : {}
			}
		});
		function lockMaxImg() {
			$('.open-viewer').viewer({
				//url: 'data-original',//显示大图
				navbar : false,//缩略图导航
				title : true,//标题，读取alt属性
				fullscreen : true,//标题，读取alt属性
			});
		}
		/*
		 * 查询
		 */
		function query(pageNo, pageSize) {
			if (!pageNo) {
				pageNo = 1;
			}
			if (!pageSize) {
				pageSize = $("#pageSizeSelect").val();
			}
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/ads/queryPage',
				data : {
					pageNo : pageNo,
					pageSize : pageSize,
					search_LIKE_adName : $("#adName").val(),
					search_LIKE_adBusinessName : $("#adBussinesName").val(),
					search_EQ_appTemplateTypeSn : "006"
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						app.pageData = data;
						laypage({
							cont : 'pageNav',
							pages : data.totalPage,
							curr : data.currentPage,
							skip : true,
							groups : 6,
							jump : function(obj, first) {
								if (!first) {
									query(obj.curr);
								}
							}
						});
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}

		/**
		 * 新增
		 */
		function add() {
			layer_show('新增珠宝广告', '/manager/ads/jewelryAdd', '', '450');
		}

		/**
		 * 修改
		 */
		function edit(id) {
			layer_show('编辑珠宝广告', '/manager/ads/jewelryEdit/' + id + "?levelId=1", '', '450');
		}
		
		/*
		 * 删除
		 */
		function del(id) {
			layer.confirm('确认要删除吗？', function() {
				var tipIndex = null;
				$.ajax({
					type : "POST",
					url : '/manager/ads/delete/' + id,
					beforeSend : function() {
						tipIndex = layer.load(0, {
							shade : false
						});
					},
					complete : function() {
						layer.close(tipIndex);
					},
					error : function(request) {
						layer.alert("系统出错");
					},
					success : function(data) {
						layer.alert(data.message);
						if (data.status == 0) {
							query();
						}
					}
				});
			});
		}

		/**
		 * 批量删除
		 */
		var batchDel = function() {

			var selectdItems = $(":checkbox[name=ids]:checked");
			if (selectdItems.size() == 0) {
				layer.alert("请选择要删除的记录！");
				return;
			}
			var ids = [];
			selectdItems.each(function() {
				ids.push($(this).val());
			});

			layer.confirm('确认要删除吗？', function() {
				var tipIndex = null;
				$.ajax({
					type : "POST",
					url : '/manager/ads/deletes',
					data : {
						ids : ids
					},
					beforeSend : function() {
						tipIndex = layer.load(0, {
							shade : false
						});
					},
					complete : function() {
						layer.close(tipIndex);
					},
					error : function(request) {
						layer.alert("系统出错");
					},
					success : function(data) {
						layer.alert(data.message);
						if (data.status == 0) {
							query();
						}
					}
				});
			});

		};

		$(function() {
			query();
		});
	</script>
</body>
</html>